<template>
  <div class="survey-container">
    <el-form :model="surveyForm" @submit.native.prevent="createSurvey" class="survey-form">
      <el-form-item label="问卷标题" label-width="100px">
        <el-input v-model="surveyForm.title"></el-input>
      </el-form-item>
      <el-form-item label="问卷描述" label-width="100px">
        <el-input v-model="surveyForm.description"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="createSurvey">创建问卷</el-button>
      </el-form-item>
    </el-form>

    <div v-if="surveyId" class="questions-section">
      <el-form :model="questionForm" @submit.native.prevent="createQuestion" class="question-form">
        <el-form-item label="题目类型" label-width="100px">
          <el-select v-model="questionForm.type" placeholder="请选择题目类型">
            <el-option label="单选" value="radio"></el-option>
            <el-option label="多选" value="checkbox"></el-option>
            <el-option label="问答" value="textarea"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目标题" label-width="100px">
          <el-input v-model="questionForm.title"></el-input>
        </el-form-item>
        <el-form-item label="题目描述" label-width="100px">
          <el-input v-model="questionForm.description"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="createQuestion">创建题目</el-button>
        </el-form-item>
      </el-form>

      <div v-if="questions && questions.length" class="added-questions">
        <h4>已添加的问题:</h4>
        <el-collapse>
          <el-collapse-item v-for="question in questions" :key="question.id" :title="question.title">
            <p>{{ question.description }}</p>
            <el-button type="danger" size="mini" @click="removeQuestion(question.id)">删除问题</el-button>

            <el-table v-if="question.options && question.options.length" :data="question.options" style="width: 100%">
              <el-table-column prop="text" label="选项内容"></el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button type="danger" size="mini" @click="removeOption(question.id, scope.row.id)">删除选项</el-button>
                </template>
              </el-table-column>
            </el-table>

            <div v-if="question.type !== 'textarea'" class="option-form">
              <el-form :model="optionForm" @submit.native.prevent="createOption(question.id)">
                <el-form-item label="选项内容" label-width="100px">
                  <el-input v-model="optionForm.text"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="mini" @click="createOption(question.id)">创建选项</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import request from '../utils/request';

export default {
  data() {
    return {
      surveyForm: {
        title: '',
        description: ''
      },
      surveyId: null,
      questions: [],
      questionForm: {
        title: '',
        type: '',
        description: '',
        surveyId: null
      },
      optionForm: {
        text: ''
      }
    };
  },
  methods: {
    async createSurvey() {
      try {
        const response = await request.post('api/survey/create', null, {
          params: {
            title: this.surveyForm.title,
            description: this.surveyForm.description,
          }
        });
        if (response.code === "200") {
          this.surveyId = response.data.id;
          console.log("创建问卷成功: " + this.surveyId);
        }
      } catch (error) {
        console.error('创建问卷失败:', error);
      }
    },
    async createQuestion() {
      try {
        this.questionForm.surveyId = this.surveyId;
        const response = await request.post('api/question/create', null, { params: this.questionForm });
        if (response.code === "200") {
          const newQuestion = response.data;
          this.questions.push(newQuestion);
          this.questionForm.title = '';
          this.questionForm.type = '';
          this.questionForm.description = '';
          console.log('创建题目成功: ' + newQuestion.id);
        }
      } catch (error) {
        console.error('创建题目失败:', error);
      }
    },
    async createOption(questionId) {
      try {
        const response = await request.post('api/option/create', null, {
          params: {
            questionId: questionId,
            text: this.optionForm.text,
          }
        });
        if (response.code === "200") {
          const newOption = {
            id: response.data.id,
            text: response.data.text,
            questionId: questionId,
          };
          const question = this.questions.find(q => q.id === questionId);
          if (question) {
            question.options.push(newOption);
          }
          this.optionForm.text = ''; // 清空输入框
          console.log('创建选项成功: ' + newOption.id);
        }
      } catch (error) {
        console.error('创建选项失败:', error);
      }
    },
    async removeOption(questionId, optionId) {
      try {
        await request.delete('api/option/delete', { params: { id: optionId } });
        const question = this.questions.find(q => q.id === questionId);
        if (question) {
          question.options = question.options.filter(o => o.id !== optionId);
        }
        console.log('删除选项成功: ' + optionId);
      } catch (error) {
        console.error('删除选项失败:', error);
      }
    },
    async removeQuestion(questionId) {
      try {
        await request.delete('api/question/delete', { params: { id: questionId } });
        this.questions = this.questions.filter(q => q.id !== questionId);
        console.log('删除题目成功: ' + questionId);
      } catch (error) {
        console.error('删除题目失败:', error);
      }
    }
  }
};
</script>

<style scoped>
.survey-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.survey-form {
  margin-bottom: 40px;
}

.questions-section {
  margin-top: 40px;
}

.added-questions {
  margin-top: 20px;
}

.option-form {
  margin-top: 20px;
}

.el-form-item {
  margin-bottom: 20px;
  padding-left: 20px;
}

.el-button {
  margin-top: 10px;
}
</style>
